---
import Layout from '../layouts/Layout.astro';
import { Icon } from '@components/icon/Icon';
import CommunityMenu from '@components/community-section/Menu';
import LayoutStyles from '@design-system/modules/community-section/Layout.module.scss';
import styles from '@design-system/modules/community-section/index.module.scss';
import FeaturedNews from '@components/community-section/news-updates/FeaturedNews';
import Events from '@components/community-section/news-updates/Events';
import ShowcaseList from "@components/community-section/ShowcaseList";
import Support from "@components/community-section/landing-page/Support";
import Socials from "@components/community-section/landing-page/Socials";
import ToolsExtensions from "@components/community-section/tools-extensions/ToolsExtensions";
---

<Layout title="AG Grid">
    <div class="layout-max-width-large">
        <CommunityMenu path={Astro.url.pathname} client:only/>
        <div class="layout-max-width-small">
            <div class={LayoutStyles.container}>
                <header class={LayoutStyles.header}>
                    <h1>Our Community</h1>
                    <p>Stay up to date with the latest news & developments from in and around AG Grid</p>
                </header>
                <div class={LayoutStyles.content}>
                    <!-- Featured News -->
                    <section>
                        <div class={styles.sectionContainer}>
                            <div class={styles.sectionHeader}>
                                <h3 class={styles.sectionTitle}>Featured News</h3>
                                <p class={styles.sectionDescription}>
                                    The latest content from the AG Grid team, including releases, new features, events, and more
                                </p>
                            </div>
                            <a href='/community/news-updates' class={styles.sectionLink}>
                                <span class={styles.linkIcon}>View all</span>
                                <Icon name="arrowRight" />
                            </a>
                        </div>
                        <FeaturedNews client:only />
                    </section>
                    <!-- Showcase -->
                    <section>
                        <div class={styles.sectionContainer}>
                            <div class={styles.sectionHeader}>
                                <h2 class={styles.sectionTitle}>Showcase</h3>
                                <p class={styles.sectionDescription}>
                                    A selection of public projects that use AG Grid
                                </p>
                            </div>
                            <a href='/community/showcase' class={styles.sectionLink}>
                                <span class={styles.linkIcon}>View all</span>
                                <Icon name="arrowRight" />
                            </a>
                        </div>
                        <ShowcaseList favouritesOnly={true} maxItems={8} client:only/>
                    </section>
                    <!-- Tools & Extensons -->
                    <section>
                        <div class={styles.sectionContainer}>
                            <div class={styles.sectionHeader}>
                                <h2 class={styles.sectionTitle}>Tools & Extensions</h2>
                                <p class={styles.sectionDescription}>
                                    Wrappers, integrations and utilities created by our community to make using AG Grid even easier (***WIP***)
                                </p>
                            </div>
                            <a href='/community/tools-extensions' class={styles.sectionLink}>
                                <span class={styles.linkIcon}>View all</span>
                                <Icon name="arrowRight" />
                            </a>
                        </div>
                        <ToolsExtensions limit={3} client:only/>
                    </section>
                    <!-- Support -->
                    <section>
                        <h2>Support & Socials</h2>
                        <Support client:only />
                    </section>
                    <hr style={{ margin: "0px 5vw 5vw 5vw"}}/>
                    <section>
                        <Socials client:only />
                    </section>
                </div>
            </div>
        </div>
    </div>
</Layout>